<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>BETA TEST ENGINE</title>
		<link rel="stylesheet" href="css/Tabs_style.css" type="text/css" media="screen"/>
        <script type="text/javascript" src="js/tabs_jquery.js"></script>
        <script type="text/javascript" src="js/sliding.form.js"></script>
        <link rel="stylesheet" type="text/css" href="css/TakingTest_Design.css" />
        
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set value="${requestScope.exam}" var="exam"></c:set>
	<style>
        span.reference{
            position:fixed;
            left:5px;
            top:2px;
            font-size:10px;
            text-shadow:1px 1px 1px #fff;
        }
        span.reference a{
            color:#555;
            text-decoration:none;
			text-transform:uppercase;
        }
        span.reference a:hover{
            color:#000;
            
        }
        h1{
            color:#ccc;
            font-size:36px;
            text-shadow:1px 1px 1px #fff;
            padding:20px;
        }
    </style>
    <script>
		$(document).keydown(function(e){
		    if (e.keyCode == 37) { 
		       //alert( "left pressed" );
		       document.getElementById('prevLink').click();
		       return false;
		    }
		});
		$(document).keydown(function(e){
		    if (e.keyCode == 39) { 
		       //alert( "right pressed" );
		       document.getElementById('nextLink').click();
		       return false;
		    }
		});
    </script>
    
</head>
<body>
        <div>
            <span class="reference">
                <a>NOTE: Please Try to finish the exam before the timer expires. Once the timer lapsed, it will automatically submit your exam.</a>
            </span>
        </div>
        <div id="content">
            <div id="wrapper">
                <div id="steps">
                    <form id="examForm" name="formElem" action="SubmitExamServlet?examID=${exam.examID}&type=Real" method="post">
                        <c:forEach items="${exam.questions}" var="questionFromDb" varStatus="x">
	                        <fieldset class="step">
	                            <legend>Question <c:out value="${x.count}"></c:out></legend>
	                                  <p><c:out value="${questionFromDb.question}"></c:out></p>
	                                  		<c:forEach items="${questionFromDb.choices}" var="choice">
	                                  			<p><input type="radio" name="${questionFromDb.questionID}" value="${choice}"> <c:out value="${choice}"></c:out> </input></p>
	                                  		</c:forEach>
	
	                        </fieldset>
                        </c:forEach>
                        <fieldset class="step">
                            <legend>Done?</legend>
                            <p class="confirmp" style="margin-left:430px; margin-top:110px;">
								Please click the Submit Exam to proceed.
							</p>
                            <p class="submit">
                                <button id="registerButton" type="submit">Submit Exam</button>
                            </p>
                            
                            
                        </fieldset>
                    </form>
                </div>
                <div id="navigation" style="overflow-x: scroll; overflow-y:hidden; width: 1260px;">
                    <ul>
                        <c:forEach items="${exam.questions}" var="questionFromDb" varStatus="x">
	                        <li 
	                        
	                        <c:if test="${x.count eq 1}">class="selected"</c:if>
	                        
	                        >
	                            <a href="#">Q<c:out value="${x.count}"></c:out></a>
	                        </li>
                        </c:forEach>
                        	<li>
	                            <a href="#" >Done</a>
	                        </li>
                        
                        <div style="position: absolute; bottom:66px; right:10px;">
	                        <li>
	                            <a href="#" id="prevLink">Previous</a>
	                        </li>
							<li>
	                            <a href="#" id="nextLink">Next</a>
	                        </li>
                        </div>
                    </ul>
                </div>
     <style>
     	 .timerclass{
     	 	z-index: 2; 
     	 	position: absolute; 
     	 	top: 41px; 
     	 	right:0;
     	 }
         .indicator{
         	display:block;
	        -webkit-transform: rotate(-90deg); 
			-moz-transform: rotate(-90deg);	
			filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
			-ms-transform: rotate(-90deg);
         }
         .blackboxdate{
         	background-color: #757070;
         	width: 65px;
         	height: 65px;
         	float: left;
         	margin-left: 5px;
         	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
         	
         }
         .number{
         	
         	position: relative;
         	top:3px;
         	left:-4px;
         	color:#ffffff;
         	font-size: 40px;
         }
         .indicator{
         	color:#ffffff;
         	position: relative;
         	right:-26px;
         	top: -36px;
         	font-size: 10px;
         }
                 
    </style>
            </div>
        </div>
    </body>
</html>